<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper-4.2.2.min.css" />
    <style>
         html,body{
           background-color: transparent;
         }
          .aui-list {
              background-image: linear-gradient(0,transparent,transparent 50%,transparent 50%);
          }
         .aui-list-item-inner{
             overflow: hidden;
         }
         .detailCountName{
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
         }
         .overflow{
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              font-size: 14px!important;
              color: #595959!important;
         }
         .msgPic{
            width: 3rem!important;
            height: 2.3rem!important;
            border-radius: 50%;
         }
         .aui-list .aui-list-item-title{
             font-size: 16px;
             color: #000;
         }
         .aui-dot{
             width: .6rem;
            height: 0.6rem;
            top: 0.7rem;
         }
         .aui-list .aui-list-item{
           background-image: linear-gradient(0,transparent,transparent 50%,transparent 50%);
           background-image: -webkit-linear-gradient(90deg,transparent,transparent 50%,transparent 50%);
           margin-bottom: 15px;
         }
        /*适配屏幕320px*/
        @media (max-width: 320px){

        }
    </style>
</head>

<body>

            <div class="moreSection" id="moreSection" v-bind:style="{height:wHeight}" >
                <ul class="aui-list aui-media-list">
                      <li class="aui-list-item" v-for="commentItem in commentList1">
                          <div class="aui-media-list-item-inner">
                              <div class="aui-list-item-media" style="width:3rem;height: 3rem;">
                                  <img :src="commentItem.orderImg" class="msgPic">
                                  <div class="dot" v-html="commentItem.dot"></div>
                              </div>
                              <div class="aui-list-item-inner">
                                  <div class="aui-list-item-text">
                                      <div class="aui-list-item-title">{{commentItem.commentItemName}}</div>
                                      <div class="aui-list-item-right">{{commentItem.btnsItem}}</div>
                                  </div>
                                  <div class="overflow">
                                      {{commentItem.balanceItem}}
                                  </div>
                              </div>
                          </div>
                      </li>
                  </ul>
            </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/swiper-4.2.2.min.js"></script>
<script type="text/javascript" src="../../script/vue-awesome-swiper.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/fastclick.js"></script>
<script>
    Vue.use(window.VueAwesomeSwiper);
</script>
<script type="text/javascript">
    apiready = function() {
       api.parseTapmode();
       api.setFrameAttr({
          bgColor : '../../image/main/info@2x.png'
       });
    };
    // 去掉iOS的点击延时问题
    window.addEventListener('load', function() {
        FastClick.attach(document.body);
    }, false);
    ////初始化页面
    var app = new Vue({
        el: '#moreSection',
        data: {
            wHeight: '',
            showMask1 : false,
            showMask2 : false,
            Swiper : '',
            slideIndex : '0',
            tabList : [
              {tabItemName :'可抢订单'},{tabItemName :'进行中'},{tabItemName :'已完成'}
            ],
            imgList : [/////tab底部黑条
              {imgs : '../../image/test@2x.png'},{imgs : '../../image/test@2x.png'},{imgs : '../../image/test@2x.png'}
            ],
            commentList1 : [
              {
                orderImg : '../../image/test@2x.png',
                dot : '<div class="aui-dot"></div>',
                commentItemName : '小提琴独奏',
                btnsItem : '昨天',
                balanceItem : "你有一条价值￥2000.00的订单可抢，速卡松大撒看见哦按时交付啦",
              },
              {
                orderImg : '../../image/test@2x.png',
                dot : '<div class="aui-dot"></div>',
               commentItemName : '小提琴独奏',
               btnsItem : '昨天',
               balanceItem : "你有一条价值￥2000.00的订单可抢，速卡松大撒看见哦按时交付啦",
              },
              {
                orderImg : '../../image/test@2x.png',
                dot : '<div class="aui-dot"></div>',
                commentItemName : '小提琴独奏',
                btnsItem : '昨天',
                balanceItem : "你有一条价值￥2000.00的订单可抢，速卡松大撒看见哦按时交付啦",
              },
              {
                orderImg : '../../image/msg@2x.png',//////通知图标
                dot : '',
                commentItemName : '小提琴独奏',
                btnsItem : '昨天',
                balanceItem : "你有一条价值￥2000.00的订单可抢，速卡松大撒看见哦按时交付啦",
              },
              {
                orderImg : '../../image/msg@2x.png',//////通知图标
                dot : '',
                commentItemName : '小提琴独奏',
                btnsItem : '昨天',
                balanceItem : "你有一条价值￥2000.00的订单可抢，速卡松大撒看见哦按时交付啦",
              }
            ]
        },
        methods: {
            init: function() {
              /////初始化页面高度
                var wh = document.documentElement.clientHeight || document.body.clientHeight;
                this.wHeight = (wh) + 'px';
            },
            gotoComment : function(){
              //bf_common_view.bf_win.openWin('userComment', '../main/');
            }
        },
        mounted() {
          var vm = this;
          ////初始化定义swiper
           this.Swiper =  new Swiper('.swiper-container', {
              speed:300,
              pagination: {
                el: '.swiper-pagination',
                type: 'bullets',
                clickable :true,
              },
              on: {
                  slideChangeTransitionStart: function(){////tab切换
                    vm.slideIndex = this.activeIndex;
                  }
              }
            })
            this.init();
        }
    });
    var mainPageMethod = {

    };
</script>

</html>
